import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:nft_shop/market/conteroller/user_info_conteroller.dart';
import 'package:nft_shop/market/page/userinfo/user_info_list.dart';
import 'package:nft_shop/res/constant.dart';
import 'package:nft_shop/res/global.dart';
import 'package:nft_shop/sift/page/sift_page.dart';
import 'package:nft_shop/widgets/custom_underline_tabIndicator.dart';
import 'package:nft_shop/widgets/load_image.dart';
import 'package:nft_shop/widgets/my_app_bar.dart';
import 'package:nft_shop/widgets/status_view.dart';

class UserInfoPage extends StatefulWidget {
  String? ID;
  UserInfoPage({Key? key,this.ID}) : super(key: key);

  @override
  _UserInfoPageState createState() => _UserInfoPageState();
}

class _UserInfoPageState extends State<UserInfoPage> with SingleTickerProviderStateMixin, AutomaticKeepAliveClientMixin{
  TabController? _tabController;
  final PageController _pageController = PageController(initialPage: 0);

  UserInfoConteroller _conteroller = UserInfoConteroller.to;

  @override
  bool get wantKeepAlive => true;

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    _conteroller.getDataList(widget.ID??"");
  }


  @override
  Widget build(BuildContext context) {
    if(_tabController == null){
      _tabController = TabController(vsync: this, length: 3);
    }

    return Scaffold(
      appBar: AppBar(
        flexibleSpace: Container(
          decoration: BoxDecoration(
            gradient: LinearGradient(colors: [
              Color(0xFF474747),
              Color(0xFF303030),
            ], begin: Alignment.topCenter, end: Alignment.bottomCenter),
          ),
        ),
      ),
      body: GetBuilder<UserInfoConteroller>(
          id:UserInfoConteroller.UserInfoTopInfo,
          builder: (logic) {
          return Stack(
            children: [
              Visibility(
                visible: logic.status == LoadStatusType.success,
                child: NestedScrollView(
                  physics: const ClampingScrollPhysics(),
                  headerSliverBuilder: (context, innerBoxIsScrolled) =>
                      _sliverBuilder(context),
                  body: PageView.builder(
                    itemCount: 3,
                    onPageChanged: _onPageChange,
                    controller: _pageController,
                    itemBuilder: (_, index) => UserInfoList(index: index,ID: widget.ID,),
                  ),
                ),
              ),
              Visibility(
                visible: logic.status != LoadStatusType.success,
                child: Container(
                  child: Center(child: StatusViews(logic.status),),
                ),
              ),
            ],
          );
        }
      )
    );
  }

  ///置顶
  List<Widget> _sliverBuilder(BuildContext context) {
    return <Widget>[
      //头部
      SliverToBoxAdapter(
        child: Column(
          children: [
            topWidget(),
          ],
        ),
      ),
      //选项卡
      SliverPersistentHeader(
        pinned: true,
        floating: true,
        delegate: SliverAppBarDelegate(
          DecoratedBox(
            decoration: BoxDecoration(color: Global.kTheme.colorBackground1),
            child: tabsWidget(),
          ),
          44.0,
        ),
      ),
    ];
  }

  Widget topWidget(){
    return Container(
      margin: EdgeInsets.only(bottom: 10),
      decoration: BoxDecoration(
        gradient: LinearGradient(colors: [
          Color(0xFF303030),
          Color(0xFF222222),
        ], begin: Alignment.topCenter, end: Alignment.bottomCenter),
        borderRadius: BorderRadius.only(
            bottomLeft: Radius.circular(20), bottomRight: Radius.circular(20)),
      ),
      child: Column(
        mainAxisSize: MainAxisSize.min,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          ClipRRect(
            borderRadius: BorderRadius.circular(100),
            child: LoadImage(
              _conteroller.model.portrait??"header_img",
              width: 62,
              height: 62,
              holderImg:"header_img",
            ),
          ),
          SizedBox(height: 10,),
          Text(_conteroller.model.nickname??"",style: TextStyle(fontSize: 16,color: Global.kTheme.textPrimary5,fontWeight: FontWeight.w600),),
          SizedBox(height: 23,),
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Text.rich(TextSpan(
                  children: [
                    TextSpan(text: _conteroller.model.allCount??"",style: TextStyle(fontSize: 14,color: Global.kTheme.textPrimary5,fontWeight: FontWeight.w600)),
                    TextSpan(text: " 在售",style: TextStyle(fontSize: 14,color: Global.kTheme.textPrimary3,fontWeight: FontWeight.w600)),
                  ]
              )),
              SizedBox(width: 80,),
              Text.rich(TextSpan(
                  children: [
                    TextSpan(text: _conteroller.model.sellCount??"",style: TextStyle(fontSize: 14,color: Global.kTheme.textPrimary5,fontWeight: FontWeight.w600)),
                    TextSpan(text: " 售出",style: TextStyle(fontSize: 14,color: Global.kTheme.textPrimary3,fontWeight: FontWeight.w600)),
                  ]
              )),
            ],
          ),
          SizedBox(height: 26,),
          Padding(
            padding: const EdgeInsets.symmetric(horizontal: 18),
            child: Text(_conteroller.model.introduce??"",
              maxLines: 15,
              overflow: TextOverflow.ellipsis,
              style: TextStyle(height: 1.6, fontSize: 12,color: Global.kTheme.textPrimary5),
            ),
          ),
          SizedBox(height: 30,),
        ],
      ),
    );
  }

  ///选项卡
  Widget tabsWidget() {
    return TabBar(
      isScrollable: true,
      controller: _tabController,
      labelStyle: TextStyle(
        fontSize: 18,
        fontFamily: Global.mySemiboldFont,
      ),
      unselectedLabelStyle: TextStyle(
        fontSize: 16,
        fontFamily: Global.mySemiboldFont,
      ),
      indicatorSize: TabBarIndicatorSize.label,
      unselectedLabelColor: Global.kTheme.textPrimary3,
      labelColor: Global.kTheme.textPrimary4,
      indicatorPadding: EdgeInsets.only(bottom: 2, left: 9, right: 9),
      indicator: CustomUnderlineTabIndicator(
          borderSide: BorderSide(
            color: Global.kTheme.textPrimary4,
            width: 3,
          )),
      tabs: const <Widget>[
        Tab(
          text: "全部",
        ),
        Tab(
          text: "藏品",
        ),
        Tab(
          text: "盲盒",
        ),
      ],
      onTap: (index) {
        if (!mounted) {
          return;
        }
        _pageController.jumpToPage(index);
        // _conteroller.currentPage = index;
      },
    );
  }

  void _onPageChange(int index) {
    _tabController?.animateTo(index);
    _conteroller.currentPage = index;
  }

}
